CSS Grid மேசன்ரி திசை: மேசன்ரி லேஅவுட் பாய்வு திசையைப் புரிந்துகொள்வது

வலை வடிவமைப்பு உலகம் தொடர்ந்து மாறிக்கொண்டே இருக்கிறது, அதனுடன், ஈர்க்கக்கூடிய மற்றும் செயல்பாட்டு தளவமைப்புகளை உருவாக்க நாம் பயன்படுத்தும் கருவிகளும் மாறுகின்றன. ஒரு நவீன முன்-இறுதி உருவாக்குநரின் ஆயுதங்களில் மிகவும் சக்திவாய்ந்த கருவிகளில் ஒன்று CSS Grid ஆகும். இரு பரிமாண தளவமைப்புகளை உருவாக்குவதில் அதன் திறன்கள் பரவலாகக் கொண்டாடப்பட்டாலும், அதன் நடத்தையின் நுட்பமான ஆனால் முக்கியமான அம்சங்களைப் புரிந்துகொள்வது அதன் முழுத் திறனையும் மாஸ்டர் செய்வதற்கு முக்கியமாகும். மேசன்ரி-பாணி தளவமைப்புகளைப் பற்றி விவாதிக்கும்போது குறிப்பாகப் பொருத்தமான ஒரு அம்சம், கிரிட்டின் உருப்படி பாய்வின் திசையாகும்.

இந்த விரிவான வழிகாட்டியில், CSS Grid-க்குள் உள்ள மேசன்ரி லேஅவுட் பாய்வு திசை என்ற கருத்தை நாம் ஆழமாக ஆராய்வோம். அது என்ன அர்த்தம், அது உங்கள் வடிவமைப்புகளை எவ்வாறு பாதிக்கிறது என்பதை நாம் பிரித்து, உலகளாவிய கண்ணோட்டத்துடன் நடைமுறை எடுத்துக்காட்டுகளை வழங்குவோம். நீங்கள் ஒரு அனுபவமிக்க உருவாக்குநராக இருந்தாலும் சரி அல்லது உங்கள் பயணத்தைத் தொடங்கினாலும் சரி, இந்தக் கட்டுரை உங்கள் கிரிட் உருப்படிகள் தங்களை எவ்வாறு வரிசைப்படுத்துகின்றன என்பதைக் கட்டுப்படுத்துவதற்கான தெளிவான, செயல்படக்கூடிய நுண்ணறிவுகளை வழங்குவதை நோக்கமாகக் கொண்டுள்ளது.

மேசன்ரி லேஅவுட் என்றால் என்ன?

திசையைப் பற்றி ஆராய்வதற்கு முன், மேசன்ரி லேஅவுட் என்றால் என்ன என்பது பற்றிய ஒரு பொதுவான புரிதலை உருவாக்குவோம். பாரம்பரிய செங்கல் கட்டும் நுட்பத்தால் ஈர்க்கப்பட்டு, ஒரு மேசன்ரி லேஅவுட் மாறுபட்ட உயரங்கள் அல்லது அகலங்களைக் கொண்ட உள்ளடக்க உருப்படிகளை ஒரு ரெஸ்பான்சிவ் கிரிட்டில் வரிசைப்படுத்துகிறது. அனைத்து உருப்படிகளும் ஒரே சீரான அளவிலான செல்களை ஆக்கிரமிக்கும் ஒரு நிலையான கிரிட் போலல்லாமல், மேசன்ரி லேஅவுட்கள் கிடைக்கக்கூடிய இடத்தை மிகவும் திறமையாக நிரப்ப முயல்கின்றன, இது பார்வைக்கு ஈர்க்கக்கூடிய மற்றும் மாறும் ஏற்பாட்டை உருவாக்குகிறது. செங்குத்து இடைவெளிகளைக் குறைக்க உருப்படிகள் இயற்கையாகவே 'இடத்தில் விழும்' படக் காட்சியகங்கள், வலைப்பதிவு இடுகைப் பட்டியல்கள் அல்லது தயாரிப்புக் காட்சிகளைப் பற்றி சிந்தியுங்கள்.

சில நூலகங்கள் செய்வது போல சொந்த CSS Grid நேரடியாக 'masonry' பண்பை செயல்படுத்தவில்லை என்றாலும், ஒரு மேசன்ரி போன்ற விளைவை உருவாக்கும் கொள்கைகள் Grid-இன் அம்சங்களை புத்திசாலித்தனமாகப் பயன்படுத்துவதன் மூலம் அடையக்கூடியவை. இது பெரும்பாலும் நெடுவரிசைகள் அல்லது வரிசைகளை அமைத்து, உருப்படிகளை அந்த இடங்களில் பாயவும் நிரப்பவும் அனுமதிப்பதை உள்ளடக்குகிறது, இது ஒரு தடுமாற்றமான, பார்வைக்கு இனிமையான விளைவை உருவாக்குகிறது.

கிரிட் பாய்வு திசையைப் புரிந்துகொள்வது

CSS Grid-இல், பாய்வு திசை என்பது கிரிட் கொள்கலனுக்குள் உருப்படிகள் எவ்வாறு வைக்கப்படுகின்றன என்பதைக் குறிக்கிறது. இயல்பாக, உருப்படிகள் HTML மூலக் குறியீட்டில் தோன்றும் வரிசையில் வைக்கப்படுகின்றன. இருப்பினும், திசையானது பல பண்புகளால் பாதிக்கப்படலாம், குறிப்பாக grid-auto-flow மற்றும் அதன் தொடர்புடைய மதிப்புகள்.

மேசன்ரி லேஅவுட்களைப் பற்றி விவாதிக்கும்போது, உருப்படிகள் ஒன்றோடொன்று எவ்வாறு நிலைநிறுத்தப்படுகின்றன, குறிப்பாக அவற்றின் உயரம் அல்லது அகலத்துடன் தொடர்புடையது என்பதில் நாம் முதன்மையாக அக்கறை கொண்டுள்ளோம். இங்குதான் பாய்வு திசையின் கருத்து முக்கியத்துவம் பெறுகிறது. ஒரு மேசன்ரி சூழலில் பாய்வு திசையை நாம் இரண்டு முதன்மை வகைகளாகப் பிரிக்கலாம்:

• செங்குத்து பாய்வு திசை (நெடுவரிசைப் பாய்வு)
• கிடைமட்ட பாய்வு திசை (வரிசைப் பாய்வு)

இவை ஒவ்வொன்றையும் விரிவாக ஆராய்வோம்.

செங்குத்து பாய்வு திசை (நெடுவரிசைப் பாய்வு)

வலை வடிவமைப்பில் ஒரு மேசன்ரி லேஅவுட்டின் மிகவும் பொதுவான புரிதலும் செயல்படுத்தலும் இதுதான் என்று வாதிடலாம். ஒரு செங்குத்து பாய்வில், கிரிட் முதன்மையாக நெடுவரிசை அச்சில் உருப்படிகளை வரிசைப்படுத்துகிறது. உருப்படிகள் நெடுவரிசைகளில் வைக்கப்படுகின்றன, மேலும் புதிய உருப்படிகள் சேர்க்கப்படும்போது, அவை ஒரு நெடுவரிசைக்குள் அடுத்த கிடைக்கக்கூடிய 'ஸ்லாட்டில்' நிலைநிறுத்தப்படுகின்றன, அதன் தற்போதைய உயரத்தில் குறைந்த அளவு ஆக்கிரமிக்கப்பட்ட இடத்தைக் கொண்ட நெடுவரிசைக்கு முன்னுரிமை அளிக்கப்படுகிறது. இது வெவ்வேறு உயரங்களின் உருப்படிகள் ஒட்டுமொத்த செங்குத்து வெள்ளை இடத்தைக் குறைக்க ஒன்றோடொன்று இணைக்கும் சிறப்பியல்பு தடுமாற்ற விளைவை உருவாக்குகிறது.

ஒரு பொதுவான மேசன்ரி படக் காட்சியகத்தைக் கவனியுங்கள். படங்கள் நெடுவரிசைகளில் வைக்கப்படுகின்றன. ஒரு நெடுவரிசையில் ஒரு குட்டையான உருப்படி இருந்தால், அடுத்த உருப்படி நேரடியாக அதன் கீழே வைக்கப்படும், முந்தைய நெடுவரிசை இதேபோன்ற உயரத்தை அடைந்ததா என்பதைப் பொருட்படுத்தாமல். இது கிரிட் திறமையாக 'கீழே நிரப்புவதை' உறுதி செய்கிறது.

grid-auto-flow: dense மற்றும் செங்குத்து மேசன்ரி

மேசன்ரிக்காக பிரத்தியேகமாக இல்லாவிட்டாலும், grid-auto-flow-இல் உள்ள dense முக்கியச் சொல் செங்குத்து பாய்வுடன் ஒரு மேசன்ரி போன்ற விளைவை அடைவதில் குறிப்பிடத்தக்க பங்கு வகிக்கிறது. grid-auto-flow ஆனது dense க்கு அமைக்கப்பட்டால், உலாவி கிரிட்டில் உள்ள துளைகளை நிரப்ப முயற்சிக்கிறது. இதன் பொருள், ஒரு உருப்படியின் இடம் ஒரு இடைவெளியை விட்டுச் சென்றால், மற்ற உருப்படிகளின் வரிசையை சீர்குலைக்காமல் அடுத்தடுத்த உருப்படி அந்த இடைவெளியில் பொருந்தினால், அது அங்கு வைக்கப்படும். இந்த 'அடர்த்தியாக்கல்' செயல்முறைதான் ஒரு மேசன்ரி லேஅவுட்டின் இறுக்கமான, ஒன்றோடொன்று இணைக்கப்பட்ட தன்மைக்கு பெரிதும் பங்களிக்கிறது.

எடுத்துக்காட்டு காட்சி: ஒரு உலகளாவிய புகைப்பட போர்ட்ஃபோலியோ

உலகெங்கிலும் உள்ள கலைஞர்களின் படைப்புகளைக் காண்பிக்கும் ஒரு புகைப்பட போர்ட்ஃபோலியோ வலைத்தளத்தை கற்பனை செய்து பாருங்கள். படங்கள் வெவ்வேறு விகிதங்கள் மற்றும் தெளிவுத்திறன்களைக் கொண்டுள்ளன, இது இயற்கையாகவே வெவ்வேறு உயரங்களுக்கு வழிவகுக்கிறது. ஒரு செங்குத்து மேசன்ரி பாய்வு இங்கே சிறந்ததாக இருக்கும்:

HTML கட்டமைப்பு:

            <div class="photo-grid">
  <div class="photo-item">
    <img src="https://example.com/images/paris-cafe.jpg" alt="Paris cafe scene">
  </div>
  <div class="photo-item">
    <img src="https://example.com/images/tokyo-street.jpg" alt="Bustling Tokyo street">
  </div>
  <div class="photo-item">
    <img src="https://example.com/images/rio-beach.jpg" alt="Rio de Janeiro beach view">
  </div>
  <div class="photo-item">
    <img src="https://example.com/images/marrakech-market.jpg" alt="Vibrant Marrakech market">
  </div>
  <div class="photo-item">
    <img src="https://example.com/images/sydney-opera.jpg" alt="Sydney Opera House at sunset">
  </div>
  <div class="photo-item">
    <img src="https://example.com/images/new-york-skyline.jpg" alt="New York City skyline">
  </div>
</div>
            

              
                Copy
              
            
          

CSS செயல்படுத்தல்:

            .photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Responsive columns */
  grid-auto-rows: 10px; /* Base row height, items will span */
  grid-auto-flow: row dense; /* Crucial for masonry effect */
  gap: 1rem; /* Spacing between items */
}

.photo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures images cover their area without distortion */
}

/* For browsers that support grid-auto-flow: dense for masonry effects */
/* Note: True masonry often requires JS or specific browser support */
.photo-grid {
  /* Applying grid-auto-flow: dense is key */
  grid-auto-flow: dense;
}

/* To make items span rows effectively, you might need to set their grid-row span */
/* This is often done dynamically or with specific item styling, but the principle is there */
.photo-item:nth-child(2) {
  grid-row: span 2; /* Example: make this item taller */
}

.photo-item:nth-child(5) {
  grid-row: span 3; /* Example: make this item even taller */
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், grid-auto-flow: row dense, ரெஸ்பான்சிவ் நெடுவரிசைகள் மற்றும் சாத்தியமான `grid-row` ஸ்பேனிங்குடன் இணைந்தால், ஒரு செங்குத்து மேசன்ரி லேஅவுட்டை உருவகப்படுத்துகிறது. உலாவி கிடைக்கக்கூடிய இடத்தில் உருப்படிகளைப் பொருத்த முயற்சிக்கிறது, இது அவை 'இடத்தில் விழுவது' போல் தோற்றமளிக்கிறது. dense முக்கியச் சொல் இங்கே இன்றியமையாதது, ஏனெனில் இது உயரமான உருப்படிகளால் உருவாக்கப்பட்ட இடைவெளிகளை நிரப்ப சிறிய உருப்படிகளை அனுமதிக்கிறது, செங்குத்து இடைவெளிகளைக் குறைக்கிறது.

செங்குத்து பாய்விற்கான முக்கிய பண்புகள்

• display: grid;: கிரிட் கொள்கலனைத் துவக்குகிறது.
• grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));: கிடைக்கக்கூடிய அகலத்தின் அடிப்படையில் தானாகவே சரிசெய்யும் ரெஸ்பான்சிவ் நெடுவரிசைகளை உருவாக்குகிறது.
• grid-auto-rows: 10px;: மறைமுகமாக உருவாக்கப்பட்ட வரிசைகளுக்கு ஒரு அடிப்படை அளவை அமைக்கிறது. உருப்படிகள் இந்த வரிசைகளில் பரவும். 10px போன்ற ஒரு சிறிய அடிப்படையை அமைப்பது உருப்படிகள் பல வரிசைகளில் பரவும்போது தங்கள் சொந்த உயரத்தை மிகவும் சுதந்திரமாக வரையறுக்க அனுமதிக்கிறது.
• grid-auto-flow: row dense;: இதுதான் மையம். row என்பது உருப்படிகள் வரிசை வாரியாக (மறைமுகமான டிராக்குகளின் அடிப்படையில்) வைக்கப்படுகின்றன என்பதை ஆணையிடுகிறது, மேலும் dense என்பது தேவைப்பட்டால் உருப்படிகளை மறுவரிசைப்படுத்துவதன் மூலம் இடைவெளிகளை நிரப்ப முயற்சிக்குமாறு அல்காரிதத்திற்குச் சொல்கிறது. செங்குத்து மேசன்ரிக்கு, உலாவி நெடுவரிசைகளை மேலிருந்து கீழாக நிரப்புவதற்கு முன்னுரிமை அளிக்கிறது, அடுத்த உருப்படியை வைக்க குறுகிய கிடைக்கக்கூடிய நெடுவரிசையைத் தேடுகிறது.
• gap: 1rem;: கிரிட் உருப்படிகளுக்கு இடையில் இடைவெளியைச் சேர்க்கிறது.

grid-auto-flow: dense ஒரு மேசன்ரி *விளைவை* உருவாக்க உதவுகிறது என்றாலும், உண்மையான, வலுவான மேசன்ரி லேஅவுட்கள் (மூல வரிசையைப் பொருட்படுத்தாமல், அதிகப்படியான இடைவெளிகள் இல்லாமல் அடுத்த கிடைக்கக்கூடிய இடத்தில் உருப்படிகள் வைக்கப்படும் என்பதற்கு உத்தரவாதம் அளிக்கும் இடத்தில்) பெரும்பாலும் உருப்படி வைப்பை நுட்பமாகக் கணக்கிடும் ஜாவாஸ்கிரிப்ட் நூலகங்களுடன் சிறப்பாக அடையப்படுகின்றன. இருப்பினும், பல பயன்பாட்டு நிகழ்வுகளுக்கு, dense உடனான CSS Grid அணுகுமுறை மிகவும் பயனுள்ள மற்றும் செயல்திறன்மிக்க தீர்வை வழங்குகிறது.

கிடைமட்ட பாய்வு திசை (வரிசைப் பாய்வு)

பாரம்பரியமாக 'மேசன்ரி' என்று புரிந்து கொள்ளப்பட்டதற்கு இது குறைவாகப் பொதுவானது என்றாலும், CSS Grid கிடைமட்ட பாய்வையும் ஆதரிக்கிறது. ஒரு கிடைமட்ட பாய்வில், உருப்படிகள் முதன்மையாக வரிசை அச்சில் வரிசைப்படுத்தப்படுகின்றன. இதன் பொருள் உருப்படிகள் வரிசைகளில் வைக்கப்படுகின்றன, மேலும் புதிய உருப்படிகள் சேர்க்கப்படும்போது, அவை ஒரு வரிசைக்குள் அடுத்த கிடைக்கக்கூடிய 'ஸ்லாட்டில்' நிலைநிறுத்தப்படுகின்றன, அதன் தற்போதைய அகலத்தில் குறைந்த அளவு ஆக்கிரமிக்கப்பட்ட இடத்தைக் கொண்ட வரிசைக்கு முன்னுரிமை அளிக்கப்படுகிறது. இது கிடைமட்ட அச்சில் ஒரு தடுமாற்ற விளைவை உருவாக்கலாம், அங்கு மாறுபட்ட அகலங்களின் உருப்படிகள் கிடைமட்ட வெள்ளை இடத்தைக் குறைக்க ஒன்றோடொன்று இணைக்கின்றன.

மாறுபட்ட அகலங்களைக் கொண்ட உருப்படிகள் உள்ள ஒரு காலவரிசை அல்லது கிடைமட்டமாக உருளும் தயாரிப்பு கரோசலை கற்பனை செய்து பாருங்கள். அவற்றை இறுக்கமாக பேக் செய்ய ஒரு கிடைமட்ட மேசன்ரி பாய்வு பயன்படுத்தப்படலாம்.

grid-auto-flow: column dense மற்றும் கிடைமட்ட மேசன்ரி

ஒரு கிடைமட்ட மேசன்ரி விளைவை அடைய, நாம் grid-auto-flow: column dense ஐப் பயன்படுத்துவோம். இந்தச் சூழ்நிலையில்:

• மறைமுகமான வரிசைகளை வரையறுக்க கிரிட் grid-template-rows உடன் அமைக்கப்பட்டுள்ளது.
• உருப்படிகள் பின்னர் நெடுவரிசைகளில் வைக்கப்படுகின்றன.
• grid-auto-flow: column dense உலாவிக்கு உருப்படிகளை முதலில் நெடுவரிசைகளில் பாயும்படி சொல்கிறது, மேலும் dense முக்கியச் சொல் அந்த நெடுவரிசைகளுக்குள் உள்ள இடைவெளிகளை நிரப்ப முயற்சிக்கும்.

எடுத்துக்காட்டு காட்சி: ஒரு சர்வதேச நிகழ்வு அட்டவணை

ஒரு பரந்த திரையில் காட்டப்படும் ஒரு நிகழ்வு அட்டவணையைக் கவனியுங்கள், அங்கு அமர்வுகள் மாறுபட்ட கால அளவுகளை (அகலங்களால் குறிப்பிடப்படுகின்றன) மற்றும் வெவ்வேறு நேர இடங்களை (வரிசைகளால் குறிப்பிடப்படுகின்றன) கொண்டிருக்கலாம். ஒரு கிடைமட்ட மேசன்ரி பாய்வு பயனுள்ளதாக இருக்கும்:

HTML கட்டமைப்பு:

            <div class="event-schedule">
  <div class="event-item">
    <h3>Keynote Address</h3>
    <p>9:00 AM - 10:30 AM</p>
    <p>Main Auditorium</p>
  </div>
  <div class="event-item">
    <h3>Workshop A</h3>
    <p>10:00 AM - 11:00 AM</p>
    <p>Room 101</p>
  </div>
  <div class="event-item">
    <h3>Panel Discussion</h3>
    <p>11:00 AM - 12:00 PM</p>
    <p>Main Auditorium</p>
  </div>
  <div class="event-item">
    <h3>Networking Break</h3>
    <p>10:30 AM - 11:00 AM</p>
    <p>Lobby</p>
  </div>
  <div class="event-item">
    <h3>Workshop B</h3>
    <p>1:00 PM - 2:30 PM</p>
    <p>Room 102</p>
  </div>
</div>
            

              
                Copy
              
            
          

CSS செயல்படுத்தல்:

            .event-schedule {
  display: grid;
  grid-template-rows: repeat(auto-fill, minmax(150px, 1fr)); /* Responsive rows */
  grid-auto-columns: 10px; /* Base column width, items will span */
  grid-auto-flow: column dense; /* Key for horizontal masonry */
  gap: 1rem;
  overflow-x: auto; /* If content exceeds viewport */
}

.event-item {
  background-color: #f0f0f0;
  padding: 1rem;
  border-radius: 5px;
}

.event-item h3 {
  margin-top: 0;
}

/* To make items span columns effectively based on duration or content */
.event-item:nth-child(1) {
  grid-column: span 2; /* Example: keynote is longer */
}

.event-item:nth-child(4) {
  grid-column: span 1.5; /* Example: networking break is shorter */
}

            

              
                Copy
              
            
          

இந்த கிடைமட்ட பாய்வு எடுத்துக்காட்டில், grid-auto-flow: column dense பயன்படுத்தப்படுகிறது. கிரிட் ரெஸ்பான்சிவ் வரிசைகளுடன் அமைக்கப்பட்டுள்ளது. உருப்படிகள் பின்னர் நெடுவரிசைகளில் வைக்கப்படுகின்றன. dense முக்கியச் சொல் இந்த நெடுவரிசைகளுக்குள் உள்ள இடைவெளிகளை நிரப்ப உதவுகிறது, இது மிகவும் கச்சிதமான கிடைமட்ட ஏற்பாட்டை உருவாக்குகிறது. grid-column பண்பைப் பயன்படுத்தி குறிப்பிட்ட உருப்படிகளை பல மறைமுகமான நெடுவரிசைகளில் பரவச் செய்யலாம், இது வெவ்வேறு கால அளவுகளை உருவகப்படுத்துகிறது.

கிடைமட்ட பாய்விற்கான முக்கிய பண்புகள்

• display: grid;: கிரிட் கொள்கலனைத் துவக்குகிறது.
• grid-template-rows: repeat(auto-fill, minmax(150px, 1fr));: தானாக சரிசெய்யும் ரெஸ்பான்சிவ் வரிசைகளை உருவாக்குகிறது.
• grid-auto-columns: 10px;: மறைமுகமாக உருவாக்கப்பட்ட நெடுவரிசைகளுக்கு ஒரு அடிப்படை அளவை அமைக்கிறது. உருப்படிகள் இந்த நெடுவரிசைகளில் பரவும்.
• grid-auto-flow: column dense;: இது உருப்படிகளை முதலில் நெடுவரிசைகளில் பாயும்படி இயக்குகிறது, மேலும் dense அந்த நெடுவரிசைகளுக்குள் உள்ள இடைவெளிகளை நிரப்ப முயற்சிக்கிறது.
• gap: 1rem;: கிரிட் உருப்படிகளுக்கு இடையில் இடைவெளியைச் சேர்க்கிறது.

grid-auto-flow: dense இன் விளக்கம் மற்றும் செயல்திறன் உலாவிகளில் சற்று மாறுபடலாம் என்பதை நினைவில் கொள்வது அவசியம். உருப்படி வைப்பில் முழுமையான நிச்சயத்தன்மை தேவைப்படும் மிகவும் முக்கியமான, சிக்கலான தளவமைப்புகளுக்கு, குறிப்பாக மாறும் உள்ளடக்கத்துடன், ஜாவாஸ்கிரிப்ட்-இயக்கப்படும் மேசன்ரி தீர்வு இன்னும் விரும்பப்படலாம். இருப்பினும், பல நவீன வலைப் பயன்பாடுகளுக்கு, CSS Grid அணுகுமுறை ஒரு சக்திவாய்ந்த மற்றும் செயல்திறன்மிக்க சொந்த தீர்வை வழங்குகிறது.

உலகளாவிய பார்வையாளர்களுக்கு சரியான பாய்வு திசையைத் தேர்ந்தெடுப்பது

ஒரு உலகளாவிய பார்வையாளர்களுக்காக வடிவமைக்கும்போது, குறிப்பாக மேசன்ரி பாணிகளுக்கான தளவமைப்பு திசையின் தேர்வு கவனமாக பரிசீலிக்கப்பட வேண்டும். வலையில் 'மேசன்ரி' என்பதன் மிகவும் பொதுவான மற்றும் உள்ளுணர்வு விளக்கம் படக் காட்சியகங்கள் மற்றும் உள்ளடக்க ஊட்டங்களில் காணப்படுவது போல் செங்குத்து பாய்வு ஆகும்.

• செங்குத்து பாய்வு (நெடுவரிசை அடிப்படையிலானது): இது பொதுவாக உலகளவில் அதிகமாகப் புரிந்து கொள்ளப்படுகிறது மற்றும் பெரும்பாலான பயனர்கள் திரைகளில் உள்ளடக்கத்தை எவ்வாறு உட்கொள்கிறார்கள் என்பதோடு ஒத்துப்போகிறது, குறிப்பாக மொபைல் சாதனங்களில் உள்ளடக்கம் செங்குத்தாக அடுக்கப்படுகிறது. போர்ட்ஃபோலியோக்கள், தயாரிப்பு பட்டியல்கள் மற்றும் வலைப்பதிவுப் பகுதிகள் போன்ற காட்சி உள்ளடக்கத்திற்கு இது சிறந்தது, அங்கு உயர மாறுபாடு பொதுவானது.
• கிடைமட்ட பாய்வு (வரிசை அடிப்படையிலானது): இது ஒரு 'மேசன்ரி' விளைவுக்கு குறைவாகப் பொதுவானது மற்றும் அனைத்து சாதனங்களிலும் திறம்பட செயல்படுத்துவது மிகவும் சவாலானதாக இருக்கும். இது கிடைமட்டமாக கச்சிதமாக இருக்க வேண்டிய தரவு அட்டவணைகள் அல்லது உருப்படிகள் தனித்துவமான அகலங்களைக் கொண்ட கிடைமட்டமாக உருளும் கரோசல்கள் போன்ற குறிப்பிட்ட பயன்பாட்டு நிகழ்வுகளுக்கு ஏற்றதாக இருக்கலாம். இருப்பினும், கிடைமட்ட உருளலை நம்பியிருப்பது சில நேரங்களில் சரியான வழிசெலுத்தல் மற்றும் தொடு சாதனங்களுக்கான பரிசீலனை இல்லாமல் செயல்படுத்தப்பட்டால் அணுகல் சவால்களை ஏற்படுத்தலாம்.

மேசன்ரி போன்ற அழகியலை நோக்கமாகக் கொண்ட பெரும்பாலான உலகளாவிய பயன்பாடுகளுக்கு, grid-auto-flow: row dense உடனான செங்குத்து பாய்வில் ஒட்டிக்கொள்வது பாதுகாப்பான மற்றும் மிகவும் பயனுள்ள அணுகுமுறையாகும். இது உலகெங்கிலும் உள்ள பயனர்களால் புரிந்து கொள்ளப்பட அதிக வாய்ப்புள்ளது மற்றும் ரெஸ்பான்சிவ் வடிவமைப்பு கொள்கைகளுக்கு நன்கு மொழிபெயர்க்கப்பட்டுள்ளது.

அணுகல் பரிசீலனைகள்

பாய்வு திசையைப் பொருட்படுத்தாமல், அணுகல் முதன்மையாக இருக்க வேண்டும். grid-auto-flow: dense ஐப் பயன்படுத்தும்போது, காட்சி காட்சியில் உள்ள உருப்படி வரிசை மூல வரிசையிலிருந்து வேறுபடலாம் என்பதை அறிந்திருப்பது முக்கியம். இது ஸ்கிரீன் ரீடர் பயனர்களுக்கு சிக்கலாக இருக்கலாம்.

முக்கிய அணுகல் புள்ளிகள்:

• மூல வரிசை: உங்கள் HTML இல் உள்ள கூறுகளின் வரிசை தர்க்கரீதியாக அர்த்தமுள்ளதாக இருப்பதை உறுதிசெய்க, dense மூலம் காட்சி ரெண்டரிங் மாற்றப்பட்டாலும் கூட. ஒரு ஸ்கிரீன் ரீடர் இன்னும் கூறுகளை அவற்றின் மூல வரிசையில் படிக்கும்.
• கவன வரிசை: மறுசீரமைக்கப்பட்ட காட்சி தளவமைப்புடன் கூட, கவனம் கூறுகள் மூலம் தர்க்கரீதியாக நகர்கிறது என்பதை உறுதிப்படுத்த விசைப்பலகை வழிசெலுத்தலைச் சோதிக்கவும்.
• அர்த்தமுள்ள உள்ளடக்கம்: தளவமைப்பு உள்ளடக்கத்திற்கு இடையிலான உறவை மறைக்கவோ அல்லது துண்டிக்கவோ கூடாது. எடுத்துக்காட்டாக, ஒரு தலைப்பு எப்போதும் அதன் படத்துடன் தெளிவாக இணைக்கப்பட வேண்டும்.
• ரெஸ்பான்சிவ்னஸ்: தளவமைப்பு வெவ்வேறு திரை அளவுகள் மற்றும் சாதனங்களில் செயல்பாட்டுடனும் அணுகக்கூடியதாகவும் இருப்பதை சரிபார்க்கவும். ஒரு டெஸ்க்டாப்பில் வேலை செய்வது ஒரு சிறிய மொபைல் திரையில் வேலை செய்யாமல் போகலாம், மற்றும் நேர்மாறாகவும்.

dense ஆல் ஏற்படும் காட்சி மறுவரிசைப்படுத்துதல் குறிப்பிடத்தக்க சொற்பொருள் அல்லது வழிசெலுத்தல் சிக்கல்களை உருவாக்கினால், உருப்படி வைப்பு மற்றும் மூல வரிசைப் பாதுகாப்பின் மீது சிறந்த கட்டுப்பாட்டை அனுமதிக்கும் ஒரு ஜாவாஸ்கிரிப்ட் தீர்வைப் பயன்படுத்துவது அவசியமாக இருக்கலாம், அல்லது dense முக்கியச் சொல்லை முற்றிலுமாகத் தவிர்த்து, அதிக வெள்ளை இடத்தை ஏற்றுக்கொள்வது.

செயல்திறன் மற்றும் உலாவி ஆதரவு

CSS Grid என்பது இன்று அனைத்து முக்கிய உலாவிகளிலும் சிறந்த உலாவி ஆதரவைக் கொண்ட ஒரு நவீன தரநிலையாகும். தளவமைப்பிற்காக சொந்த CSS Grid ஐப் பயன்படுத்துவது பொதுவாக செயல்திறன்மிக்கது, ஏனெனில் உலாவிகள் அதை ரெண்டர் செய்வதற்கு மிகவும் உகந்ததாக உள்ளன.

grid-auto-flow: dense க்கான உலாவி ஆதரவு:

dense முக்கியச் சொல் நவீன உலாவிகளில் நல்ல ஆதரவைக் கொண்டுள்ளது. இருப்பினும், எந்த CSS அம்சத்தைப் போலவே, குறிப்பாக நீங்கள் பழைய உலாவிகளை ஆதரிக்க வேண்டுமானால், மிகவும் புதுப்பித்த பொருந்தக்கூடிய தகவல்களுக்கு Can I Use... ஐச் சரிபார்ப்பது எப்போதும் புத்திசாலித்தனம்.

செயல்திறன் குறிப்புகள்:

• DOM சிக்கலைக் குறைத்தல்: உங்கள் HTML கட்டமைப்பை முடிந்தவரை சுத்தமாகவும் எளிமையாகவும் வைத்திருங்கள்.
• படங்களை மேம்படுத்துதல்: பெரிய, மேம்படுத்தப்படாத படங்கள் ஏற்றுதல் நேரங்களை கணிசமாக பாதிக்கலாம். பொருத்தமான பட வடிவங்கள் மற்றும் சுருக்கத்தைப் பயன்படுத்தவும்.
• அதிகப்படியான `grid-column`/`grid-row` ஸ்பேனிங்கைத் தவிர்த்தல்: பயனுள்ளதாக இருந்தாலும், சிக்கலான ஸ்பேனிங்கை அதிகமாகப் பயன்படுத்துவது சில நேரங்களில் ரெண்டரிங் மேல்நிலையைச் சேர்க்கலாம்.
• சோம்பேறி ஏற்றுதலைக் கருத்தில் கொள்ளுங்கள்: படம்-கனமான மேசன்ரி கிரிட்களுக்கு, ஆரம்ப பக்க ஏற்றுதல் செயல்திறனை மேம்படுத்த படங்களுக்கு சோம்பேறி ஏற்றுதலைச் செயல்படுத்தவும்.

மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள்

CSS Grid இல் செங்குத்து மற்றும் கிடைமட்ட மேசன்ரி பாய்வின் முக்கிய கருத்துக்கள் நேரடியானவை என்றாலும், உங்கள் வடிவமைப்புகளை உயர்த்தக்கூடிய மேம்பட்ட நுட்பங்கள் மற்றும் பரிசீலனைகள் உள்ளன.

grid-auto-flow ஐ வெளிப்படையான வைப்புடன் இணைத்தல்

grid-auto-flow இன் தானியங்கி-வைப்பு நடத்தையை grid-column மற்றும் grid-row ஐப் பயன்படுத்தி வெளிப்படையான வைப்புடன் நீங்கள் இணைக்கலாம். சில உருப்படிகள் காட்சி படிநிலையை உருவாக்க அல்லது சில உள்ளடக்கம் குறிப்பிட்ட பகுதிகளில் தோன்றுவதை உறுதிசெய்ய பல டிராக்குகளில் பரவ வேண்டும் என்று நீங்கள் விரும்பும்போது இது குறிப்பாகப் பயனுள்ளதாக இருக்கும், அதே நேரத்தில் மீதமுள்ளவற்றை தானியங்கி-பாய்வு கையாளட்டும்.

எடுத்துக்காட்டு: ஒரு சிறப்பு உருப்படியை முன்னிலைப்படுத்துதல்

            .featured-item {
  grid-column: span 2; /* Make featured item span 2 columns */
  grid-row: span 2;    /* Make it taller as well */
}

            

              
                Copy
              
            
          

dense ஐப் பயன்படுத்தும்போது, ஒரு உருப்படியை வெளிப்படையாக வைப்பது அடுத்தடுத்த உருப்படிகளின் வைப்பை பாதிக்கலாம். உலாவி வெளிப்படையாக வைக்கப்பட்ட உருப்படியை இடமளிக்க முயற்சிக்கும், பின்னர் மீதமுள்ள இடங்களை நிரப்புவதைத் தொடரும்.

வெவ்வேறு சூழல்களில் மேசன்ரி

ரெஸ்பான்சிவ் வடிவமைப்பிற்கு:

மேசன்ரிக்கான CSS Grid இன் உண்மையான சக்தி ரெஸ்பான்சிவ் வடிவமைப்புடன் உயிர்ப்பிக்கிறது. மீடியா வினவல்களைப் பயன்படுத்தி grid-template-columns (அல்லது கிடைமட்ட பாய்விற்கு grid-template-rows) ஐ சரிசெய்வதன் மூலம், நீங்கள் நெடுவரிசைகள்/வரிசைகளின் எண்ணிக்கையை மாற்றலாம், இதனால் வெவ்வேறு சாதனங்களில் உங்கள் மேசன்ரி தளவமைப்பின் தோற்றத்தை மாற்றலாம். இது உங்கள் வடிவமைப்பு பெரிய டெஸ்க்டாப் மானிட்டர்களில் இருந்து சிறிய மொபைல் திரைகளுக்கு அழகாக அளவிடப்படுவதை உறுதி செய்கிறது.

எடுத்துக்காட்டு:

            .photo-grid {
  /* ... existing styles ... */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

@media (max-width: 768px) {
  .photo-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 480px) {
  .photo-grid {
    grid-template-columns: 1fr; /* Single column on very small screens */
  }
}

            

              
                Copy
              
            
          

`repeat()` உடன் `auto-fit` vs `auto-fill` ஐப் பயன்படுத்துதல்

auto-fill மற்றும் auto-fit ஆகிய இரண்டும் `repeat()` உடன் ரெஸ்பான்சிவ் கிரிட்களுக்கு சிறந்தவை என்றாலும், auto-fill அவற்றை நிரப்ப போதுமான உள்ளடக்கம் இல்லையென்றால் வெற்று டிராக்குகளை விட்டுவிடும், அதேசமயம் auto-fit அந்த வெற்று டிராக்குகளைச் சரித்து, கிடைக்கக்கூடிய இடத்தை நிரப்ப நிரப்பப்பட்ட டிராக்குகளை விரிவுபடுத்தும். அதிகபட்ச உள்ளடக்க அடர்த்தியை நோக்கமாகக் கொண்ட மேசன்ரி லேஅவுட்களுக்கு, auto-fill பெரும்பாலும் dense உடன் நன்றாக வேலை செய்கிறது.

grid-auto-flow: dense ஐ எப்போது தவிர்க்க வேண்டும்

dense கச்சிதமான தளவமைப்புகளை உருவாக்குவதற்கு சக்திவாய்ந்தது என்றாலும், அது எப்போதும் சிறந்த தேர்வாக இருப்பதில்லை:

• சொற்பொருளுக்கு மூல வரிசை முக்கியமானதாக இருக்கும்போது: உங்கள் HTML இல் உள்ள உருப்படிகளின் வரிசை காட்சி ரீதியாக பாதுகாக்கப்பட வேண்டிய வலுவான சொற்பொருள் அர்த்தத்தைக் கொண்டிருந்தால் (எ.கா., ஒரு செயல்முறையின் படிகள், விளக்கங்களின் வரிசை), dense ஐத் தவிர்க்கவும்.
• கணிக்கக்கூடிய தளவமைப்பு மிக முக்கியமானதாக இருக்கும்போது: உருப்படிகள் மறுவரிசைப்படுத்துவதற்கான எந்தவொரு சாத்தியமும் இல்லாமல் மிகவும் குறிப்பிட்ட வரிசையில் அல்லது ஏற்பாட்டில் தோன்றும் என்பதற்கு முழுமையான நிச்சயத்தன்மை தேவைப்பட்டால், நீங்கள் அனைத்து உருப்படிகளுக்கும் வெளிப்படையான வைப்பு அல்லது ஒரு ஜாவாஸ்கிரிப்ட் தீர்வு தேவைப்படலாம்.
• அறிவாற்றல் குறைபாடுகள் உள்ள பயனர்களுக்கு: எதிர்பாராத காட்சி மறுவரிசைப்படுத்துதல் சில நேரங்களில் திசைதிருப்பக்கூடியதாக இருக்கலாம்.

முடிவுரை

CSS Grid இல் மேசன்ரி லேஅவுட் பாய்வு திசையை புரிந்துகொள்வது என்பது, கிரிட்டின் முதன்மை அச்சில், அது செங்குத்தாக (நெடுவரிசைகள்) அல்லது கிடைமட்டமாக (வரிசைகள்) இருந்தாலும், உருப்படிகள் எவ்வாறு நிலைநிறுத்தப்படுகின்றன என்பதை அங்கீகரிப்பதாகும். grid-auto-flow பண்பு, குறிப்பாக dense முக்கியச் சொல்லுடன், மேசன்ரி லேஅவுட்களின் சிறப்பியல்பு கச்சிதமான மற்றும் பார்வைக்கு ஈர்க்கக்கூடிய ஏற்பாட்டை அடைவதில் கருவியாக உள்ளது.

உலகளாவிய வலை உருவாக்கத்திற்கு, செங்குத்து பாய்வு திசை பொதுவாக மேசன்ரி-பாணி தளவமைப்புகளை உருவாக்குவதற்கான மிகவும் நடைமுறை மற்றும் பரவலாகப் புரிந்து கொள்ளப்பட்ட அணுகுமுறையாகும். இது மாறுபட்ட அளவுகளின் உள்ளடக்கத்தை மாறும் வகையில் காண்பிக்க ஒரு வலுவான, செயல்திறன்மிக்க மற்றும் அணுகக்கூடிய வழியை வழங்குகிறது. grid-template-columns, grid-auto-rows, மற்றும் grid-auto-flow: row dense போன்ற CSS Grid பண்புகளை சிந்தனையுடன் பயன்படுத்துவதன் மூலம், உருவாக்குநர்கள் ஒரு மாறுபட்ட சர்வதேச பார்வையாளர்களைப் பூர்த்தி செய்யும் அதிநவீன, ரெஸ்பான்சிவ் வடிவமைப்புகளை உருவாக்க முடியும்.

உங்கள் தளவமைப்பு உத்திகளைத் தேர்ந்தெடுத்து செயல்படுத்தும்போது எப்போதும் அணுகலுக்கு முன்னுரிமை அளிக்க நினைவில் கொள்ளுங்கள், சாதனங்களில் சோதிக்கவும், உங்கள் பயனர்களின் குறிப்பிட்ட தேவைகளைக் கருத்தில் கொள்ளவும். இந்த நுண்ணறிவுகளுடன், உலகளவில் பிரமிக்க வைக்கும் மற்றும் செயல்பாட்டு மேசன்ரி தளவமைப்புகளை உருவாக்குவதற்கு CSS Grid இன் சக்தியைப் பயன்படுத்த நீங்கள் நன்கு தயாராக உள்ளீர்கள்.